<script lang="ts" setup>
import { ref, watch } from 'vue';

import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';

import {
  ElButton,
  ElCard,
  ElInput,
  ElInputNumber,
  ElMessage,
  ElSpace,
  ElSwitch,
} from 'element-plus';

import { getGlobalSettingApi, setGlobalSettingApi } from '#/api';

const globalSettingBK = ref({});

const globalSetting = ref({
  createTime: '',
  updateTime: '',
  proxyIp: '',
  proxyPort: 0,
  proxyActivate: false,
  userId: 0,
  fnosIpType: false,
  fnosIp: '',
  fnosPort: 0,
  fnosUser: '',
  fnosPassWd: '',
  fnosSsl: false,
});

const syncMark = ref('success');

watch(
  globalSetting,
  () => {
    // console.log(globalSetting.value);
    // console.log(globalSettingBK.value);
    if (
      JSON.stringify(globalSetting.value) ===
      JSON.stringify(globalSettingBK.value)
    ) {
      syncMark.value = 'success';
    } else {
      if (syncMark.value !== 'warning') {
        syncMark.value = 'warning';
      }
    }
  },
  { deep: true },
);

const initGlobalSetting = async () => {
  const globalSettingDB = await getGlobalSettingApi();
  // 设置默认属性
  globalSetting.value.userId = globalSettingDB.userId;
  globalSetting.value.createTime = globalSettingDB.createTime;
  globalSetting.value.updateTime = globalSettingDB.updateTime;
  // 系统代理设置
  globalSetting.value.proxyIp = globalSettingDB.proxyIp;
  globalSetting.value.proxyPort = globalSettingDB.proxyPort;
  globalSetting.value.proxyActivate = globalSettingDB.proxyActivate;
  // 飞牛影视
  globalSetting.value.fnosIpType = globalSettingDB.fnosIpType;
  globalSetting.value.fnosIp = globalSettingDB.fnosIp;
  globalSetting.value.fnosPort = globalSettingDB.fnosPort;
  globalSetting.value.fnosUser = globalSettingDB.fnosUser;
  globalSetting.value.fnosPassWd = globalSettingDB.fnosPassWd;
  globalSetting.value.fnosSsl = globalSettingDB.fnosSsl;
  // 设置对比数据
  globalSettingBK.value = globalSettingDB;
};
initGlobalSetting();

const syncGlobalSetting = async () => {
  await setGlobalSettingApi(globalSetting.value);
  initGlobalSetting();
  ElMessage({
    message: $t('setup.global.syncTips'),
    type: 'success',
  });
};
</script>

<template>
  <Page
    :description="$t('setup.global.description')"
    :title="$t('setup.global.title')"
  >
    <ElCard class="mb-5">
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <span style="align-content: center">{{
            $t('setup.global.sysSetting')
          }}</span>
          <ElButton
            :type="syncMark"
            plain
            style="margin-left: auto"
            @click="syncGlobalSetting()"
          >
            {{ $t('setup.global.sync') }}
          </ElButton>
        </div>
      </template>

      <ElSpace alignment="flex-start" style="width: 100%" wrap>
        <ElCard v-show="false">
          <template #header>{{ $t('setup.global.proxySetting') }} </template>
          <div>
            <div style="margin-bottom: 5%">
              {{ $t('setup.global.proxyActivate') }}:
              <ElSwitch
                v-model="globalSetting.proxyActivate"
                style="

--el-switch-on-color: #13ce66"
              /><br />
            </div>
            <div style="margin-bottom: 5%">
              {{ $t('setup.global.proxyIp') }}:
              <ElInput
                v-model="globalSetting.proxyIp"
                placeholder="127.0.0.1"
                style="width: 60%"
              /><br />
            </div>
            <div>
              {{ $t('setup.global.proxyPort') }}:
              <ElInputNumber v-model="globalSetting.proxyPort" :min="0" />
            </div>
          </div>
        </ElCard>

        <ElCard>
          <template #header>{{ $t('setup.global.fnosVSetting') }} </template>
          <div>
            <div style="margin-bottom: 5%">
              {{ $t('setup.global.fnosIpType') }}:
              <ElSwitch
                v-model="globalSetting.fnosIpType"
                active-text="IPV6"
                inactive-text="IPV4"
                inline-prompt
                style="

                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #39f;
                "
              /><br />
            </div>
            <div style="margin-bottom: 5%">
              {{ $t('setup.global.fnosSsl') }}:
              <ElSwitch
                v-model="globalSetting.fnosSsl"
                active-text="HTTPS"
                inactive-text="HTTP"
                inline-prompt
                style="

                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #39f;
                "
              /><br />
            </div>
            <div style="margin-bottom: 5%">
              {{ $t('setup.global.fnosVIp') }}:
              <ElInput
                v-model="globalSetting.fnosIp"
                :placeholder="$t('setup.global.fnosVIpTips')"
                style="width: 60%"
              /><br />
            </div>
            <div style="margin-bottom: 5%">
              {{ $t('setup.global.fnosVPort') }}:
              <ElInputNumber v-model="globalSetting.fnosPort" :min="0" />
            </div>
            <div style="margin-bottom: 5%">
              {{ $t('setup.global.fnosVUser') }}:
              <ElInput
                v-model="globalSetting.fnosUser"
                :placeholder="$t('setup.global.fnosVUserTips')"
                style="width: 60%"
              /><br />
            </div>
            <div style="margin-bottom: 5%">
              {{ $t('setup.global.fnosVPassWd') }}:
              <ElInput
                v-model="globalSetting.fnosPassWd"
                :placeholder="$t('setup.global.fnosVPassWdTips')"
                style="width: 60%"
                type="password"
              /><br />
            </div>
          </div>
        </ElCard>
      </ElSpace>
    </ElCard>
  </Page>
</template>
